<template>
  <div class="table-wrapper">
    <el-table :data="tableData" style="width: 80%" border class="table">
      <template v-for="item in columnData" :key="item.id">
        <el-table-column
          :label="item.label"
          :prop="item.prop"
          :width="item.width"
          :align="item.align"
          :fixed="item.fixed"
          :sortable="item.sort"
          :formatter="item.formatter"
        >
        </el-table-column>
      </template>

      <el-table-column fixed="right" label="Operations">
        <template #default>
          <el-button link type="primary" size="small" @click="handleClick"
            >Detail</el-button
          >
          <el-button link type="primary" size="small">Edit</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <!-- 分页器 -->
    <el-pagination
      class="pagination"
      background
      :total="tableData.length"
      :current-page="pagination.currentPage"
      :page-size="pagination.pageSize"
      @current-change="getTableData"
      @size-change="getTableData"
    >
    </el-pagination>
  </div>
</template>

<script setup>
import { ref } from "vue";
const getTableData = () => {
  console.log("click");
};
const pagination = ref({
  currentPage: 1,
  pageSize: 10,
});
const columnData = ref([
  {
    id: 0,
    prop: "contractName",
    // width: "140",
    align: "left",
    label: "常规名称长字段",
  },
  {
    id: 1,
    prop: "contractDate",
    // width: "200",
    align: "left",
    label: "合同日期",
  },
  {
    id: 2,
    prop: "contractAmout",
    // width: "130",
    align: "right",
    label: "合同金额",
    sort: true,
  },
]);
const tableData = ref([
  {
    id: "1",
    contractName: "医院设备1",
    contractDate: "2023-01-30 14:44:19",
    contractAmout: "50000",
    contractNum: "1",
  },
  {
    id: "2",
    contractName: "医院设备2",
    contractDate: "2023-01-29 14:44:19",
    contractAmout: "30000",
    contractNum: "2",
  },
  {
    id: "3",
    contractName: "医院设备3",
    contractDate: "2023-01-28 15:44:19",
    contractAmout: "75000",
    contractNum: "3",
  },
  {
    id: "4",
    contractName: "医院设备4",
    contractDate: "2023-01-27 15:44:19",
    contractAmout: "80000",
    contractNum: "4",
  },
  {
    id: "5",
    contractName: "医院设备5",
    contractDate: "2023-01-26 15:44:19",
    contractAmout: "80000",
    contractNum: "5",
  },
  {
    id: "6",
    contractName: "医院设备6",
    contractDate: "2023-01-25 15:44:19",
    contractAmout: "80000",
    contractNum: "6",
  },
  {
    id: "7",
    contractName: "医院设备7",
    contractDate: "2023-01-24 15:44:19",
    contractAmout: "80000",
    contractNum: "7",
  },
  {
    id: "8",
    contractName: "医院设备8",
    contractDate: "2023-01-23 15:44:19",
    contractAmout: "80000",
    contractNum: "8",
  },
  {
    id: "9",
    contractName: "医院设备9",
    contractDate: "2023-01-22 15:44:19",
    contractAmout: "80000",
    contractNum: "9",
  },
  {
    id: "10",
    contractName: "医院设备10",
    contractDate: "2023-01-21 15:44:19",
    contractAmout: "80000",
    contractNum: "10",
  },
]);
</script>
<style scoped>

.pagination {
  padding-top: 20px;
  padding-bottom: 20px;
  width: 300px;
  margin: 0 auto;
}
</style>
